import React, { useState, useEffect } from 'react';

import './index.less';
import { Button, Checkbox } from 'antd';
import { RightOutlined } from '@ant-design/icons';

interface PropsType {
  data: any;
  placeholder?: string;
  onChange: (res: string[]) => void;
}
interface defaultData {
  title: string;
  children:
    | {
        title: string;
        children: never[];
        value: string;
      }[]
    | [];
  value: string;
}
export const Cascader: React.FC<PropsType> = (props) => {
  const { data, placeholder, onChange } = props;
  const [isopen, setisopen] = useState<boolean>(false);
  const [twodata, settwodata] = useState<defaultData[]>([]);
  const [thredata, setthredata] = useState<defaultData[]>([]);
  const [checkdata, setcheckdata] = useState<string[]>([]);
  
  const ctroDrop = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    setisopen(true);
    e.nativeEvent.stopImmediatePropagation();
  };
  const closedrop = () => {
    setisopen(false);
    settwodata([]);
    setthredata([]);
    setcheckdata([]);
  };
  // 渲染数据
  const setdata = (data: defaultData[], type: boolean) => {
    if (data.length === 0) {
      return;
    }
    if (type) {
      settwodata(data);
      setthredata([]);
    } else {
      setthredata([]);
      setthredata(data);
    }
  };
  const checkboxchange = (e: any, title: string) => {
    let newcheckdata = checkdata;
    if (e.target.checked) {
      newcheckdata.push(title);
    } else {
      newcheckdata.forEach((element, index) => {
        if (element === title) {
          newcheckdata.splice(index, 1);
        }
      });
    }
    setcheckdata(newcheckdata);
  };

  useEffect(() => {
    document.addEventListener('click', closedrop);

    return () => document.removeEventListener('click', closedrop);
  }, []);

  return (
    <div className='cascader_box'>
      <div className='cascader_header' onClick={(event) => ctroDrop(event)}>
        <i>{placeholder ? placeholder : '请选择'}</i>
        <RightOutlined />
      </div>
      <div className={`cascader_drop ${isopen ? 'cascader_display' : ''}`}>
        <div className='cascader_list' onClick={(event) => ctroDrop(event)}>
          <ul className=' cascader_list1'>
            {data.map((el: defaultData, i: number) => {
              return (
                <li key={i} onClick={() => setdata(el.children, true)}>
                  {el.children.length === 0 ? (
                    <Checkbox
                      onChange={(event) => checkboxchange(event, el.title)}
                    >
                      {el.title}
                    </Checkbox>
                  ) : (
                    <i>{el.title}</i>
                  )}
                  {el.children.length > 0 ? (
                    <RightOutlined className='iconcascader' />
                  ) : (
                    <span></span>
                  )}
                </li>
              );
            })}
          </ul>
          <ul className=' cascader_list1'>
            {twodata.map((el: defaultData, i: number) => {
              return (
                <li key={i} onClick={() => setdata(el.children, false)}>
                  {el.children.length === 0 ? (
                    <Checkbox
                      onChange={(event) => checkboxchange(event, el.title)}
                    >
                      {el.title}
                    </Checkbox>
                  ) : (
                    <i>{el.title}</i>
                  )}
                  {el.children.length > 0 ? (
                    <RightOutlined className='iconcascader' />
                  ) : (
                    <span></span>
                  )}
                </li>
              );
            })}
          </ul>
          <ul className=' cascader_list1'>
            {thredata.map((el: defaultData, i: number) => {
              return (
                <li key={i} onClick={() => setdata(el.children, true)}>
                  {el.children.length === 0 ? (
                    <Checkbox
                      onChange={(event) => checkboxchange(event, el.title)}
                    >
                      {el.title}
                    </Checkbox>
                  ) : (
                    <i>{el.title}</i>
                  )}
                  {el.children.length > 0 ? (
                    <RightOutlined className='iconcascader' />
                  ) : (
                    <span></span>
                  )}
                </li>
              );
            })}
          </ul>
        </div>

        <div className='cascader_btnbox'>
          <Button>取消</Button>
          <Button type='primary' onClick={() => onChange(checkdata)}>
            确定
          </Button>
        </div>
      </div>
    </div>
  );
};
